<template>
  <div class="view-wrapper">
    <div class="head_box">
      <div class="head_left">
        <div class="head_left_title">平台数据概览</div>
        <div class="head_left_body">
          <div class="head_left_item_one">
              <div class="one_title">当前商户数量</div>
              <div class="one_body">
                <div class="one_body_item">
                    <div class="one_body_item_num">
                      <span>{{merchantCountDTO.merchantCount}}</span>
                      <div class="one_body_item_tip">正常</div>
                    </div>
                    <p v-if="merchantCountDTO.yesterdayCount > 0">（昨日+{{merchantCountDTO.yesterdayCount}}）</p>
                </div>
                <div class="one_body_item">
                  <div class="one_body_item_num">
                      <span>{{merchantCountDTO.toBeUsedCount}}</span>
                      <div class="one_body_item_tip">待使用</div>
                    </div>
                </div>
              </div>
          </div>
          <div class="head_left_item_box">
            <div class="head_left_item_two">
              <div class="two_title">当前用户数量</div>
              <div class="two_body">{{customerCountDTO.customerCount}}</div>
            </div>
            <div class="head_left_item_two">
              <div class="two_title">当前CoCo存量</div>
              <div class="two_body" style="font-size: 35px;">{{customerCountDTO.coCo}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 待办事项 -->
      <div class="head_right">
        <div class="head_right_title">待办事项</div>
        <div class="head_right_body">
          <div class="head_right_h">
            <div class="head_right_hl">
              <span>待办事项</span>
              <span style="color: #ff4848">({{ countInformation.total }})</span>
            </div>
            <div class="head_right_hr" @click="jump">
              <span>进入待办中心</span>
              <img src="@/static/index//enter_daiban.png" alt="" />
            </div>
          </div>
        <div class="head_right_b">
          <el-tabs  @tab-click="handleClick">
            <el-tab-pane>
              <span slot="label">全部</span>
              <div class="table_ls" v-for="(item, index) in list" :key="index">
                <div class="table_lsL ellipseHide">
                  <span class="table_lsL_type"
                    >【{{ item.businessTypeDict }}】</span
                  >
                  <span>{{ item.jobName }}</span>
                </div>
                <div class="table_lsR">
                  <span @click="handle(item)">去处理</span>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="table_null" v-if="list.length == 0">暂无数据</div>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label">
                商家入驻
                <span
                  class="num1"
                  v-if="countInformation.merchantApplyNum > 0"
                  >({{ countInformation.merchantApplyNum }})</span
                ></span>
              <div class="table_ls" v-for="(item, index) in list" :key="index">
                <div class="table_lsL">
                  <span class="table_lsL_type"
                    >【{{ item.businessTypeDict }}】</span
                  >
                  <span>{{ item.jobName }}</span>
                </div>
                <div class="table_lsR">
                  <span @click="handle(item)">去处理</span>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="table_null" v-if="list.length == 0">暂无数据</div>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label">
                提现异常<span
                  class="num1"
                  v-if="countInformation.withdrawErrorNum > 0"
                  >({{ countInformation.withdrawErrorNum }})</span
                ></span>
              <div class="table_ls" v-for="(item, index) in list" :key="index">
                <div class="table_lsL">
                  <span class="table_lsL_type"
                    >【{{ item.businessTypeDict }}】</span
                  >
                  <span>{{ item.jobName }}</span>
                </div>
                <div class="table_lsR">
                  <span @click="handle(item)">去处理</span>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="table_null" v-if="list.length == 0">暂无数据</div>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label">
                预警消息<span
                  class="num1"
                  v-if="countInformation.warningMessageNum > 0"
                  >({{ countInformation.warningMessageNum }})</span
                ></span
              >
              <div class="table_ls" v-for="(item, index) in list" :key="index">
                <div class="table_lsL">
                  <span class="table_lsL_type"
                    >【{{ item.businessTypeDict }}】</span
                  >
                  <span>{{ item.jobName }}</span>
                </div>
                <div class="table_lsR">
                  <span @click="handle(item)">去处理</span>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="table_null" v-if="list.length == 0">暂无数据</div>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label">
                神椰订单<span
                  class="num1"
                  v-if="countInformation.shenyeOrderNum > 0"
                  >({{ countInformation.shenyeOrderNum }})</span
                ></span>
              <div class="table_ls" v-for="(item, index) in list" :key="index">
                <div class="table_lsL ellipseHide">
                  <span class="table_lsL_type"
                    >【{{ item.businessTypeDict }}】</span
                  >
                  <span>{{ item.jobName }}</span>
                </div>
                <div class="table_lsR">
                  <span @click="handle(item)">去处理</span>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="table_null" v-if="list.length == 0">暂无数据</div>
            </el-tab-pane>
          </el-tabs>
        </div>
        </div>
      </div>
    </div>

    <!-- 平台数据汇总 -->
      <div class="data-summary">
        <div class="head_box">
          <div class="head_left">
            <div class="head_left_title">平台数据汇总</div>
            <div class="head_left_body">
              <div class="head_left_item">
                <div class="item_head">
                  <div class="item_head_left">
                    <div class="item_head_left_text">交易总金额</div>
                    <div class="item_head_left_num">{{billSummary.billTotal}}</div>
                  </div>
                  <div class="item_head_right">
                    <img src="@/static/summary01.png" alt="">
                  </div>
                </div>
                <div class="item_line"></div>
                <div class="item_footer">
                  <div class="item_footer_text">日均销售额</div>
                  <div class="item_footer_money">￥{{billSummary.billTotalAvg}}</div>
                </div>
              </div>
              <div class="head_left_item">
                <div class="item_head">
                  <div class="item_head_left">
                    <div class="item_head_left_text">账单笔数</div>
                    <div class="item_head_left_num">{{billSummary.billNum}}</div>
                  </div>
                  <div class="item_head_right">
                    <img src="@/static/summary02.png" alt="">
                  </div>
                </div>
                <div class="item_line"></div>
                <div class="item_footer">
                  <div class="item_footer_text">日均账单</div>
                  <div class="item_footer_money">{{billSummary.billNumAvg}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="head_right">
            <div class="head_right_title"></div>
            <div class="head_right_body">
              <el-form :inline="true"   class="demo-form-inline">
                <el-form-item label="订单类型：">
                  <el-select v-model="billType" multiple  collapse-tags  placeholder="请选择" >
                    <el-option v-for="item in typeList" :key="item.id" :label="item.value" :value="item.id"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="交易时间：" prop="startTime">
                  <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button @click="reset">重置</el-button>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
              <div class="head_right_body_table">
                <div class="table_head">
                  <div class="table_head_t colo_F5F7FB">订单类型</div>
                  <div class="table_head_t">交易金额</div>
                  <div class="table_head_t">账单数量</div>
                </div>
                <div class="table_head" v-if="billTypeTwo.includes('1') || billTypeTwo.length == 0">
                  <div class="table_head_t colo_F5F7FB">日常收款</div>
                  <div class="table_head_t">{{billSummary.dailyCollection}}</div>
                  <div class="table_head_t">{{billSummary.dailyCollectionNum}}</div>
                </div>
                <div class="table_head" v-if="billTypeTwo.includes('2') || billTypeTwo.length == 0">
                  <div class="table_head_t colo_F5F7FB">预付卡售卡</div>
                  <div class="table_head_t">{{billSummary.card}}</div>
                  <div class="table_head_t">{{billSummary.cardNum}}</div>
                </div>
                <div class="table_head" v-if="billTypeTwo.includes('3') || billTypeTwo.length == 0">
                  <div class="table_head_t colo_F5F7FB">神椰乐园</div>
                  <div class="table_head_t">{{billSummary.punchActivity}}</div>
                  <div class="table_head_t">{{billSummary.punchActivityNum}}</div>
                </div>
                <div class="table_head" v-if="billTypeTwo.includes('4') || billTypeTwo.length == 0">
                  <div class="table_head_t colo_F5F7FB">神椰盲盒</div>
                  <div class="table_head_t">{{billSummary.box}}</div>
                  <div class="table_head_t">{{billSummary.boxNum}}</div>
                </div>
                <div class="table_head" v-if="billTypeTwo.includes('5') || billTypeTwo.length == 0">
                  <div class="table_head_t colo_F5F7FB">转赠</div>
                  <div class="table_head_t">{{billSummary.donation}}</div>
                  <div class="table_head_t">{{billSummary.donationNum}}</div>
                </div>
                <div class="table_head" v-if="billTypeTwo.includes('6') || billTypeTwo.length == 0">
                  <div class="table_head_t colo_F5F7FB">NFR售卡</div>
                  <div class="table_head_t">{{billSummary.nfr}}</div>
                  <div class="table_head_t">{{billSummary.nfrNum}}</div>
                </div>
                <div class="table_head" v-if="billTypeTwo.includes('7') || billTypeTwo.length == 0">
                  <div class="table_head_t colo_F5F7FB">赚卡售卡</div>
                  <div class="table_head_t">{{billSummary.candyCard}}</div>
                  <div class="table_head_t">{{billSummary.candyCardNum}}</div>
                </div>
                <div class="table_head" v-if="billTypeTwo.includes('8') || billTypeTwo.length == 0">
                  <div class="table_head_t colo_F5F7FB">神椰集市</div>
                  <div class="table_head_t">{{billSummary.exchange}}</div>
                  <div class="table_head_t">{{billSummary.exchangeNum}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { waitingProcessNum, getIndex,getplatformMCCountV2,waitingCenterGetBillSummary } from "@/api/index";

export default {
  name: 'BeeTokenSystemH5Index',

  data() {
    return {
      loading: false,
      countInformation: {}, //代办任务未处理
      businessType: "", //任务类型 "1":"商家入驻","2"："提现审核"  ,"3":"增发申请",
      status: 1, //处理状态 1：待处理 2：已处理
      list: [],
      date:[],//交易时间
      billType:[], //订单类型
      billTypeTwo:[], //订单类型
      billSummary:{},
      customerCountDTO: {}, //用户、coco数量
      merchantCountDTO: {}, //商户
      typeList:[
        {id:'1',value:'日常收款'},
        {id:'2',value:'预付卡售卡'},
        {id:'3',value:'神椰乐园'},
        {id:'4',value:'神椰盲盒'},
        {id:'5',value:'转赠'},
        {id:'6',value:'NFR售卡'},
        {id:'7',value:'赚卡售卡'},
        {id:'8',value:'神椰集市'},
      ]
    };
  },
  created(){
    this.countByType();
    this.getplatformMCCount();
    this.getWaitingCenterGetBillSummary();
    this.getlist();
  },
  mounted() {
    
  },

  methods: {
    // 交易数据汇总
    getWaitingCenterGetBillSummary(){
      var params = {
        billTypeList:this.billTypeTwo,
      }
      if(this.date != ''){
          params.startTime = this.date[0]
          params.endTime = this.date[1]
      }else{
        params.startTime = ''
        params.endTime = ''
      }
      console.log(params)
      //用户数量和商家数量
      waitingCenterGetBillSummary(params).then((res) => {        
         this.billSummary = res.result
        // this.customerCountDTO = res.result.customerCountDTO;
        // this.merchantCountDTO = res.result.merchantCountDTO;
      });
    },
    getplatformMCCount() {
      //用户数量和商家数量
      getplatformMCCountV2().then((res) => {        
        this.customerCountDTO = res.result.customerCountDTO;
        this.merchantCountDTO = res.result.merchantCountDTO;
      });
    },
    countByType() {
      //代办任务未处理条数
      this.loading = true;
      const params = {
        merchantName: '',
        status: 1,
      };
      waitingProcessNum(params).then((res) => {
        this.countInformation = res.result;
        this.loading = false;
      });
          //  查询代办事项列表数量

    },
    // 查询
    onSubmit(){
      this.billTypeTwo = [
        ...this.billType
      ]
      this.getWaitingCenterGetBillSummary()
    },
    // 重置
    reset(){
      this.date = ''
      this.billType = []
      this.billTypeTwo = []
      this.getWaitingCenterGetBillSummary()
    },
    getlist() {
      const params = {
        businessType: this.businessType,
        status: this.status,
        pageSize: 6,
      };
      //代办任务列表
      this.loading = true;
      getIndex(params).then((res) => {
        this.list = res.result.records;
        this.loading = false;
      });
    },
    handleClick(tab) {
      console.log(tab.index);
      let index = tab.index;
      if (index == 0) {
        this.businessType = "";
      } else if (index == 1) {
        this.businessType = 1;
      } else if (index == 2) {
        this.businessType = 5;
      } else if (index == 3) {
        this.businessType = 6;
      } else {
        this.businessType = 7;
      }
      this.getlist();
    },
    handle(item) {
      // console.log(e)
      // if (e == 1) {
      //   this.$router.push({ path: "/merchants/MerchantsList" });
      // } else if (e == 2) {
      //   this.$router.push({ path: "/moneyManagement/withdrawal-list" });
      // } else {
      //   this.$router.push({ path: "/TodoCenter" });
      // }
      if(item.businessType == 1){
        this.$router.push({ path: "/merchants/merchantsAudit",query:{id:1} });
      }else if(item.businessType == 5){
        this.$router.push({ path: "/moneyManagement/withdrawal-list",query:{id:1}});

      }else if(item.businessType == 6){
              let url = process.env.VUE_APP_SUPERVISE 
              window.open(url, 'target');
      }else if(item.businessType == 7){
         // 神椰乐园
        if(item.jobName.includes('椰椰邮差')){
            this.$router.push({ path:"/consumeMiningManagement/onlineClockingActivity",query:{id:3} });
        }else if(item.jobName.includes('集市兑换')){
          // 集市兑换
          this.$router.push({ path: "/integralOperation/commodityConfiguration",query:{id:2}});
        }
      }
    },
    jump() {
      this.$router.push({ path: "/TodoCenter" });
    },
  },
};
</script>

<style lang="scss" scoped>
.head_box {
  display: flex;
  align-items: center;
}
.head_left {
  min-width: 387px;
  margin-left: 33px;
  width: 20%;
}
.head_left_body{
  height: 370px;
}
.head_left_item_one{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 175px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #FF6464;
  color: #ffffff;
}
.one_title{
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
.one_body{
  flex: 1;
  display: flex;
  flex-direction: row;
}
.one_body_item:nth-child(1){
  // width: 62%;
   margin-left: 29px;
}
.one_body_item:nth-child(2){
   margin-left: 25px;
}
.one_body_item{
  margin-top: 25px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  // align-items: center;
}
.one_body_item_num{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.one_body_item_num span{
    height: 60px;
    font-size: 45px;
    font-weight: 500;
    line-height: 53px;
}
.one_body_item p{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding-top: 10px;
    box-sizing: border-box;
}
.one_body_item_tip{
  margin-top: 6px;
}
.head_left_item_box{
  margin-top: 23px;
}
.head_left_item_box{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.head_left_item_two:nth-child(1){
  background: #FFB053;
}
.head_left_item_two:nth-child(2){
  background: #6297FF;
}
.head_left_item_two{
  width: 183px;
  height: 172px;
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}
.two_body{
  font-size: 45px;
  font-weight: 500;
  line-height: 53px;
  display: flex;
  justify-content: center;
  margin-top: 30px;
  text-align: center;
  word-break: break-all;
}
.head_left_title,.head_right_title{
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  color: #222222;
  margin-bottom: 20px;
  height: 25px;
}
.head_right_title{
  margin-left: 24px;
}
.head_right {
  // flex: 1;
   width: 77%;
   margin-right: 44px;
   
}
.head_right_body{
  width: 100%;
  height: 370px;
  border-radius: 10px;
  overflow: hidden;
  margin-left: 24px;
  // background-color: #fff;
  box-shadow: 0px 4px 12px 0px rgba(1, 41, 99, 0.06);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.ellipseHide {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.head_right_h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  background: #ffffff;
}

.head_right_hl {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #303133;
  font-weight: bold;
}

.head_right_hr {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #248afe;
  cursor: pointer;
}

.head_right_hr:hover {
  opacity: 0.8;
}

.head_right_hr img {
  width: 10px;
  height: 10px;
  margin-left: 4px;
}
.table_box {
  display: flex;
  align-items: center;
  border-radius: 2px;
}

.table_ls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #303133;
  margin-bottom: 12px;
}

.tableLs:last-child {
  margin-bottom: 0px;
}

.num1 {
  color: #ff4848;
}
.head_right_b{
  flex: 1;
  background: #ffffff;
}
.head_right_b::v-deep .el-tabs__item.is-active {
  color: #ff9300;
}

.head_right_b::v-deep .el-tabs__item:hover {
  color: #ff9300;
}

.head_right_b::v-deep .el-tabs__header {
  background: #F6F8FC;
  padding-left: 69px;
  box-sizing: border-box;
  margin: unset;
}
.head_right_b::v-deep .el-tabs__content{
  padding: 29px 31px 30px 20px;
  box-sizing: border-box;
}
.head_right_b::v-deep .el-tabs__nav-wrap::after{
  background-color: unset;
}
.head_right_b::v-deep .el-tabs__item{
  padding: 0 40px;
}
.table_lsR {
  font-size: 12px;
  color: #ff4848;
}

.table_lsR:hover {
  cursor: pointer;
  opacity: 0.8;
}

.table_lsL {
  color: #303133;
  font-size: 14px;
  width: 90%;
}

.table_lsL_type {
  margin-right: 16px;
}

.table_lsR i {
  margin-left: 6px;
}

.rank_box {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rank_boxls {
  width: 49.2%;
  // height: 484px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 4px 12px 0px rgba(1, 41, 99, 0.06);
  padding-bottom: 16px;
  height: 500px;
}

.table_null {
  font-size: 15px;
  color: #303133;
  text-align: center;
  padding-top: 62px;
}

 // 平台数据汇总
  .data-summary{
    margin-top: 41px;
    .head_left_body{
         height: 417px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
        .head_left_item{
          width: 100%;
          height: 197px;
          padding: 30px 30px 20px 30px;
          box-sizing: border-box;
          border-radius: 10px;
          background: #ffffff;
          .item_head{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 28px;
            .item_head_left{
              .item_head_left_text{
                font-size: 16px;
                font-weight: 400;
                line-height: 22px;
                color: #747474;
                margin-bottom: 5px;
              }
              .item_head_left_num{
                font-size: 45px;
                font-weight: 500;
                line-height: 53px;
                color: #222222;
              }
            }
            .item_head_right{
              img{
                width: 76px;
                height: 76px;
              }
             }
          }
          .item_line{
            width: 339px;
            border-bottom: 1px solid #EFEFEF;
            margin: 0 auto;
          }
          .item_footer{
            display: flex;
            flex-direction: row;
            font-size: 16px;
            font-weight: 400;
            line-height: 22px;
            margin-top: 16px;
            .item_footer_text{
              margin-right: 15px;
            }
          }

        }
    }
    .head_right_body{
      height: 417px;
      background: #ffffff;
      padding: 30px;
      box-sizing: border-box;

      .head_right_body_table{
              display: flex;
              flex-direction: row;
            .table_head{
                width: calc(100% / 9);
                &:first-child{
                    border-left: 1px solid #EEEEEE;
                  }
                .table_head_t{
                  font-size: 15px;
                  height: 48px;
                  border-right: 1px solid #EEEEEE;
                  color: #333333;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-top: 1px solid #EEEEEE;
                  &:last-child{
                    border-bottom: 1px solid #EEEEEE;
                  }
                }
                  .colo_F5F7FB{
                    background: #F5F7FB;
                  }
            }

      } 
    }
  }
</style>